{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h2>{{ group.name }}</h2>
  <p>群主：{{ group.owner.username or group.owner.email }} | 当前人数：{{ members|length }}/{{ group.max_members }}</p>
  <h5>成员列表</h5>
  <ul class="list-group mb-3">
    {% for m in members %}
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>
          {{ m.user.username or m.user.email }}
          {% if m.role == 'owner' %}<span class="badge bg-primary ms-2">群主</span>
          {% elif m.role == 'admin' %}<span class="badge bg-success ms-2">管理员</span>{% endif %}
        </span>
        {% if is_owner or is_admin %}
          {% if m.role != 'owner' %}
          <div class="btn-group">
            {% if is_owner %}
              <form method="post" style="margin:0;display:inline;">
                <input type="hidden" name="new_owner_id" value="{{ m.user.id }}">
                <button type="submit" class="btn btn-sm btn-outline-primary" 
                        onclick="return confirm('确定要将群主转让给{{ m.user.username or m.user.email }}吗？')">
                  转让群主
                </button>
              </form>
            {% endif %}
            {% if is_owner %}
              <form method="post" action="/group/{{group.id}}/set_admin" style="margin:0;display:inline;">
                <input type="hidden" name="set_admin_id" value="{{ m.user.id }}">
                <button type="submit" class="btn btn-sm btn-outline-success" 
                        onclick="return confirm('确定要{% if m.role == 'admin' %}取消{% else %}设置{% endif %}{{ m.user.username or m.user.email }}的管理员权限吗？')">
                  {% if m.role == 'admin' %}取消管理员{% else %}设为管理员{% endif %}
                </button>
              </form>
            {% endif %}
            <form method="post" style="margin:0;display:inline;">
              <input type="hidden" name="kick_user_id" value="{{ m.user.id }}">
              <button type="submit" class="btn btn-sm btn-outline-danger" 
                      onclick="return confirm('确定要将{{ m.user.username or m.user.email }}移出群聊吗？')">
                移除
              </button>
            </form>
          </div>
          {% endif %}
        {% elif m.role == 'admin' and current_user.id == group.owner_id %}
          <form method="post" style="margin:0;display:inline;">
            <input type="hidden" name="kick_user_id" value="{{ m.user.id }}">
            <button type="submit" class="btn btn-sm btn-outline-danger">移除</button>
          </form>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
  {% if is_owner or is_admin %}
  <div class="card mb-3">
    <div class="card-header bg-light">
      <h5 class="mb-0">{% if is_owner %}群主{% else %}管理员{% endif %}管理</h5>
    </div>
    <div class="card-body">
      <p class="text-muted small mb-3">
        {% if is_owner %}
          作为群主，您可以转让群主、设置管理员和管理成员
        {% else %}
          作为管理员，您可以管理成员（不能修改群主权限）
        {% endif %}
      </p>
    </div>
  </div>
  
  <form method="post" action="{{ url_for('expand_group', group_id=group.id) }}" class="mb-3">
    <div class="input-group">
      <input type="text" name="exchange_code" class="form-control" placeholder="输入兑换码扩容至1000人" maxlength="64">
      <button type="submit" class="btn btn-success">扩容</button>
    </div>
  </form>
  
  <h5 class="mt-4">邀请新成员</h5>
  <form method="post" action="{{ url_for('invite_to_group', group_id=group.id) }}" class="mb-3">
    <div class="input-group">
      <input type="email" name="email" class="form-control" placeholder="输入成员邮箱" required>
      <button type="submit" class="btn btn-primary">发送邀请</button>
    </div>
  </form>
  
  <h5>管理成员</h5>
  {% endif %}
  
  <a href="/" class="btn btn-secondary">返回首页</a>
  
  {% if not is_owner %}
  <form method="post" action="{{ url_for('leave_group', group_id=group.id) }}" class="mt-3">
    <button type="submit" class="btn btn-outline-danger" onclick="return confirm('确定要退出这个群聊吗？')">
      <i class="fas fa-sign-out-alt"></i> 退出群聊
    </button>
  </form>
  {% else %}
  <button class="btn btn-danger mt-3" data-bs-toggle="modal" data-bs-target="#disbandModal">
    <i class="fas fa-trash"></i> 解散群聊
  </button>
  
  <!-- 解散群聊确认模态框 -->
  <div class="modal fade" id="disbandModal" tabindex="-1" aria-labelledby="disbandModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="disbandModalLabel">确认解散群聊</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          确定要解散"{{ group.name }}"群聊吗？此操作将删除整个群组且不可恢复！
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <form method="post" action="{{ url_for('disband_group', group_id=group.id) }}">
            <button type="submit" class="btn btn-danger">确认解散</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  
  <hr>
  <p>在顶部搜索框内添加/chat即可进入群聊</p>
</div>
{% endblock %}
